<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <!-- <meta http-equiv="X-UA-Compatible" content="IE=edge"> -->
    <title>测试avalon</title>
</head>
<body>
	<div ms-controller="postsController">
		<h2>{{title}}</h2>
		<hr />
		<small>{{message.name}}</small>
		<small>{{message.other.date}}</small>
		<small>{{message.other.id}}</small>
		<ul ms-each-post = "posts">
			<li>
				<h1>{{post.title}}</h1>
				<small>{{post.date}}</small>
				<p>{{post.content}}</p>
			</li>
		</ul>
	</div>
</body>
</html>
<script type="text/javascript" src="../build/openAvalon.min.js"></script>
<!-- <script type="text/javascript" src="../src/avalon.js"></script> -->
<script type="text/javascript">
	avalon.ready(function(){
		var modelWarehouse = avalon.modelWarehouse = {
			watchers : {},
			set : function(dataName,data){
				this[dataName] = data;
				var watchersItem = this.watchers[dataName];
				if (watchersItem) {
					var watcherLen = watchersItem.length;
					for (var i = 0,watch; i < watcherLen; i+=1) {
						watch = watchersItem[i];
						if (avalon.models[watch.viewModel][watch.prototype]!=data) {
							avalon.models[watch.viewModel][watch.prototype] = data;
						}
					};
				}
			},
			get : function(dataName){
				return this[dataName]||[];
			},
			watch : function(vmName,prototype,dataName){
				var watch = {
					viewModel:vmName,
					prototype:prototype
				};
				var watchersItem = this.watchers[dataName];
				if(watchersItem){
					for(var i=0;item = watchersItem[i];i+=1){
						if (item.viewModel === watch.viewModel&&item.prototype === watch.prototype) {
							break;
						}
					}
					(i===watchersItem.length)&&(watchersItem[watchersItem.length] = watch);
				}else{
					this.watchers[dataName] = [watch];
				}
				return this[dataName]||[];
			}
		};
		modelWarehouse.set("blogMessage",{name:"bangeel",other:{date:(new Date()).toString(),id:"2"}});
		modelWarehouse.set("postsData",[]);

		avalon.define("postsController",function(vm){
			vm.title = "It's my blogs";
			vm.posts = modelWarehouse.watch("postsController","posts","postsData");
			vm.message = modelWarehouse.watch("postsController","message","blogMessage");
		});

		avalon.define("postsList",function(vm){
			vm.title = "blogs list";
			vm.posts = modelWarehouse.watch("postsList","posts","postsData");
		});
		avalon.scan();
		var postsData = [
			{
				title:"hello",
				date:"2012-12-07 18:38:37",
				content:"nothing.sorry!"
			},
			{
				title:"okkok",
				date:"2013-07-07 18:39:13",
				content:"nothing.sorry!"
			},
		];
		var blogMessage = {
			name:"Gaubee",
			other:{
				date:(new Date()).toString(),
				id:"3"
			}
		}
		setTimeout(function(){
			modelWarehouse.set("postsData",postsData);
			modelWarehouse.set("blogMessage",blogMessage);
		},1000)
	});
</script>
